<template>
	<uni-nav-bar title="配送费膨胀详情" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
	<view class="package_sale" v-if="orderLists">
		<view class="space-between">
			<view>订单号</view>
			<view>{{orderLists.order_sn}}</view>
		</view>
		<view class="space-between top">
			<view>车友</view>
			<view>{{orderLists.driver_name}} </view>
		</view>
		<view class="space-between top">
			<view>加注量</view>
			<view>{{orderLists.amount}} </view>
		</view>
		<view class="space-between top">
			<view>加注机</view>
			<view>{{orderLists.fill_name}}</view>
		</view>
		<view class="space-between top">
			<view>加注时间</view>
			<view>{{orderLists.createtime}} </view>
		</view>
		<view class="space-between top">
			<view>加注地址</view>
			<view style="width:70%;text-align: right;">{{orderLists.address}} </view>
		</view>
	</view>
	<view class="package_sale" v-if="orderLists">
		<view class="space-between">
			<view>膨胀状态</view>
			<view>{{orderLists.status_name}}</view>
		</view>
		<view class="space-between top" v-if="orderLists.des">
			<view>膨胀失败原因</view>
			<view>{{orderLists.des}}</view>
		</view>
		<view class="space-between top" v-if="orderLists.status==3">
			<view>配送费</view>
			<view>{{orderLists.delivery_fee}}</view>
		</view>
		<view class="space-between top" v-if="orderLists.status==3">
			<view>分账比例</view>
			<view>{{orderLists.delivery_bfb}}</view>
		</view>
		<view class="space-between top" v-if="orderLists.status==3">
			<view>膨胀配送费</view>
			<view>{{orderLists.multiple_fee}}</view>
		</view>
	</view>
	<view class="but" v-if="orderLists&&orderLists.status==2"
		@click="redirectTo('Sale/delivery/addExpansion?id='+orderID+'&name='+orderLists.driver_name)">去膨胀</view>
</template>

<script setup lang="ts">
	import { navBack, redirectTo } from '@/utils/navigator';
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { getStaffDriverOrderInfo } from '@/gql/earthPushing/teamJoin';
	import { showLoading } from '@/utils/prompt';
	import { toPublish } from '@mqtt';
	const orderID = ref()
	const orderLists = ref()
	onLoad((pearm) => {
		orderID.value = Number(pearm.id)
		init()
	})
	function init() {
		showLoading()
		const payload = {
			query: getStaffDriverOrderInfo,
			variables: {
				id: orderID.value
			},
		};
		toPublish(
			'ql/staff/getStaffDriverOrderInfo',
			payload,
			(obj : any) => {
				const { getStaffDriverOrderInfo } = obj.data;
				orderLists.value = getStaffDriverOrderInfo
			}
		);
	}
</script>

<style scoped lang="less">
	.top {
		margin-top: 20rpx;
	}

	.but {
		width: 260rpx;
		height: 98rpx;
		background: #558AF1;
		border-radius: 5px;
		color: #fff;
		text-align: center;
		line-height: 98rpx;
		margin: 80rpx auto 0px;
	}
</style>